<template>
    <div id="v-right-t">
        <div class="car-out">
            <div style="width: 100%;height: 100%;" ref="comChar"></div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted, watchEffect, reactive, toRaw, nextTick } from 'vue';
import * as echarts from 'echarts';
import ecTheme from "/@/assets/echartsConfig/westeros.project.json";
export default defineComponent({
    name:'v-right-t',
    props: {
        rightTopData: {
            type: String,
            default: '',
        },
    },
    setup(props){
        const comChar:Ref = ref(null);
        const liData = ref();
        let isFinish = false;

        echarts.registerTheme('westeros', ecTheme);
        const initCharts = () => {
            let chart: any; 
            chart = echarts.init(comChar.value as HTMLElement, 'westeros');
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                },
                grid: {
                    top:30,
                    left: 0,
                    right:20,
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLine:{
                        lineStyle: {
                            color:'rgb(6,65,130)',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgb(145,179,203)"
                        },
                        interval: 0
                    }
                },
                yAxis: {
                    name:'百分比',
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: ['rgb(6,65,130)'],
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color:'rgb(145,179,203)',
                        }
                    },
                    axisLabel: {
                        show: true,
                        formatter: '{value} %',
                        textStyle: {
                            color: "rgb(145,179,203)"
                        },
                    },
                    nameTextStyle:{
                        padding: [0,50,0,0]
                    },
                    max: 100,
                    min: 0,
                },
                series: [
                    {
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        areaStyle: {
                            // 折线区块颜色
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(23,209,255,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(23,209,255,0)'
                                }
                            ])
                        },
                        itemStyle: {
                            normal: {
                                // 改变折线点的颜色
                                color: 'rgba(23,209,255,1)',
                                lineStyle: {
                                    // 改变折线颜色
                                    color: 'rgba(23,209,255,1)',
                                }
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    }
                ]
            }

            let setTime = setInterval(() => {
                if(isFinish || liData.value){
                    if(liData.value.chart[0].length !== 0) option.series[0].data = liData.value.chart[0].count;
                    if(liData.value.xAxis) option.xAxis.data = liData.value.xAxis;
                    clearInterval(setTime);
                    return option && chart.setOption(option)
                }
            },20);
        }
        watchEffect(() => {
            let getData = props.rightTopData;
            if(getData !== ''){
                let setArr = JSON.parse(getData);
                liData.value = setArr;
                isFinish = true;
                initCharts();
            }
        });
        onMounted(() => {
            initCharts()
        })
        return {
            comChar,
        }
    }
})
</script>
<style lang="scss" scoped>
#v-right-t{
    width: 100%;
    height: 100%;
    .car-out{
        margin: 6vh auto 0 auto;
        height: 72%;
        width: 90%;
    }
}
</style>